$(function () {

    var interval;
    var videoUrl;


    $("#jqGrid").jqGrid({
        url: '../../equipment/onLineList',     // 请求后台json数据的url
        datatype: "json",                // 后台返回的数据格式
        // 列表标题及列表模型
        colModel: [
            {label: 'id', name: 'id', index: 'id', width: 50, key: true},
            {label: '眼镜编号', name: 'guid', index: 'guid', width: 80},
            {label: '蓝牙地址', name: 'btmac', index: 'btmac', width: 80},
            {label: '公司编号', name: 'companycode', index: 'companycode', width: 80},
            {label: '视频直播', width: 80, formatter: customFmatter}

        ],
        viewrecords: true,     // 是否显示行号，默认值是false，不显示
        height: 385,            // 表格高度
        rowNum: 50,             // 一页显示的行记录数
        rowList: [50, 100],     // 翻页控制条中 每页显示记录数可选集合
        rownumbers: true,
        rownumWidth: 25,
        autowidth: true,
        multiselect: true,
        pager: "#jqGridPager",          // 翻页DOM
        jsonReader: {                   // 重写后台返回数据的属性
            root: "page.list",          // 将rows修改为page.list
            page: "page.currPage",      // 将page修改为page.currPage
            total: "page.totalPage",    // 将total修改为page.totalPage
            records: "page.totalCount"  // 将records修改为page.totalCount
        },
        prmNames: {              // 改写请求参数属性
            page: "page",
            rows: "limit",
            order: "order"
        },
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
            //设置高度
            $("#jqGrid").jqGrid('setGridHeight', getWinH());
        }
    });


    //自定义格式化内容
    function customFmatter(cellvalue, options, rowObject) {
        // var videoUrl = "http://123.207.118.28:8090/videostream/video.jpg";
        var videoUrl = "http://123.207.118.28:36316/" + rowObject.btmac + ".jpg";
        //var videoUrl = "http://123.207.118.28:36316/A80C63A17557.jpg";
        if (rowObject.isdeleted == 0) {
            return '<a href="javascript:void(0)" style="display: none" onclick="showFile(\''
                + videoUrl
                + '\')">[查看]</a>';
        } else {
            return '<a href="javascript:void(0)" onclick="showFile(\''
                + videoUrl
                + '\')">[观看]</a>';
        }

    }

});
// interval = self.setInterval("refreshPicture2()", 66);
// //
// function refreshPicture2() {
//     var timestamp = new Date().getTime();
//     $("#image2").attr('src', 'http://123.207.118.28:36316/044F4C6CD82B.jpg?' + timestamp);
// }

//查看图片或视频
function showFile(url) {
    url = decodeURIComponent(url);
    var index = url.lastIndexOf("\/");
    var fileName = url.substring(index + 1, url.length);
    // //图片
    if (fileName.indexOf(".jpg") > 0) {
        showPicture(url, fileName);
    }

}

var onLineInterval = self.setInterval("refresh()", 2000);

// 预览图片
function showPicture(url, fileName) {
    videoUrl = url;
    var d = dialog({
        title: fileName,
        content: $("#video-div"),
        cancel: function () {
            clearInterval(interval);
            //开启onLineList
            onLineInterval = self.setInterval("refresh()", 2000)
        },
        cancelValue: "关闭"

    });
    interval = self.setInterval("refreshPicture()", 100);
    d.showModal();

    //关闭在线列表刷新
    clearInterval(onLineInterval);
}

var vm = new Vue({
    el: '#rrapp',
    data: {
        showList: true,
        title: null,
        equipment: {}
    },
    methods: {
        query: function () {
            //vm.reload();
            $("#jqGrid").jqGrid('setGridParam', {
                postData: {
                    keyword: $("#keyword").val()
                },
                page: 1
            }).trigger("reloadGrid");
        },
        add: function () {
            vm.showList = false;
            vm.title = "新增";
            vm.equipment = {};
        },
        update: function (event) {
            var id = getSelectedRow();
            if (id == null) {
                return;
            }
            vm.showList = false;
            vm.title = "修改";

            vm.getInfo(id)
        },
        saveOrUpdate: function (event) {
            var url = vm.equipment.id == null ? "../equipment/save" : "../equipment/update";
            $.ajax({
                type: "POST",
                url: url,
                data: JSON.stringify(vm.equipment),
                success: function (r) {
                    if (r.code === 0) {
                        alert('操作成功', function (index) {
                            vm.reload();
                        });
                    } else {
                        alert(r.msg);
                    }
                }
            });
        },
        del: function (event) {
            var ids = getSelectedRows();
            if (ids == null) {
                return;
            }

            confirm('确定要删除选中的记录？', function () {
                $.ajax({
                    type: "POST",
                    url: "../equipment/delete",
                    data: JSON.stringify(ids),
                    success: function (r) {
                        if (r.code == 0) {
                            alert('操作成功', function (index) {
                                $("#jqGrid").trigger("reloadGrid");
                            });
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            });
        },
        getInfo: function (id) {
            $.get("../equipment/info/" + id, function (r) {
                vm.equipment = r.equipment;
                //更新输入框高度
                autosize.update($('textarea'));
            });
        },
        reload: function (event) {
            vm.showList = true;
            var page = $("#jqGrid").jqGrid('getGridParam', 'page');
            $("#jqGrid").jqGrid('setGridParam', {
                page: page
            }).trigger("reloadGrid");
        }
    }
});


function refreshPicture() {
    var timestamp = new Date().getTime();
    $("#image").attr('src', videoUrl + '?t=' + Math.random());
}


function refresh() {
    vm.showList = true;
    var page = $("#jqGrid").jqGrid('getGridParam', 'page');
    $("#jqGrid").jqGrid('setGridParam', {
        page: page,
        loadui: 'disable'
    }).trigger("reloadGrid");
}

// textarea 高度自动扩展
autosize($('textarea'));